<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include/template::header"></th:block>

	<link rel="stylesheet" href="../../static/css/bind.css" th:href="@{/css/bind.css?v=20180629}">
	<style>
		.bind-tips {
			padding-top: 10px;
			color: #bbbbbb;
			font-size: 12px;
		}
	</style>
	<!-- S SEO -->
<!-- 	<meta name="keywords" content="your keywords">
	<meta name="description" content="your description"> -->
	<!-- E SEO --> 
	<title>绑定手机号_时事一点通</title>
</head>
<body>
	<div class="wrapper">
		<div class="bind-header">
			<img src="../../../resources/static/img/logo-lg-icon.png" th:src="@{/img/logo-lg-icon.png}" alt="logo">
		</div>
		<input id="form-error" type="hidden" th:attr="value=${error}">
		<div class="bind-tips container">
			<div class="col-sm-12">根据国家网络实名制规定，请绑定手机号！</div>
		</div>

		<div class="container bind-form">
				<div class="col-sm-12">
					<form id="bind-form" class="form-horizontal" action="/wechat/binding/after" method="post">
			            <div class="form-group">
			                <div class="col-sm-12">
			                	<i class="sm-icon icon-user"></i>
			                    <input type="tel" class="form-control removeiOS input-default" id="bind-mobile" name="mobile" placeholder="请输入手机号">
			                </div>
			            </div>
			            <div class="form-group code-form-group">
			                <div class="col-sm-12">
			                	<i class="sm-icon icon-pwd"></i>
			                    <input type="password" class="form-control removeiOS input-default" id="bind-code" name="vaildCode" placeholder="请输入验证码">
			                    <button class="btn btn-line btn-radius get-code-btn">获取验证码</button>
			                </div>
			            </div>
			            <div class="form-group">
			                <div class="col-sm-12">
			                    <button class="btn btn-primary btn-block btn-radius" id="bind-sure-btn">确定</button>
			                </div>
			            </div>
			        </form>
				</div>
		</div>
	</div>

	<th:block th:include="include/template::js"></th:block>
	<script>
		$(function() {
			var formError = $('#form-error').val();
			if(formError != '') {
				toastr.error(formError);
			}
			$('.get-code-btn').on('click', doRegGetCode);
			$('.get-code-btn').on('click', function() {
				return false;
			});
			$('#bind-sure-btn').click(function() {
				if(!(validate.phone($('#bind-mobile'), '手机号')&&validate.code($('#bind-code'), '验证码'))) {
					return false;
				}
				$(this).text('绑定中...').attr('disabled','disabled');
				$('#bind-form').submit();
			})
		});
		
	</script>
</body>
</html>